<template>
  <section class='f-capital'>
    <header class="f-header">
      <div class="g-flex-ct">
        <p style="width: 5px;height: 12px;background: #E4EDEA;border-radius: 3px;"></p>
        <p style="font-weight: 400;padding: 0 8px 0 7px">数据统计截止至{{ getDateTime(serverTime)[6] }}</p>
        <img style="width:12px;height:12px" src="@/assets/icons/brokerage_btn_refresh.png" alt="" @click="getIncomeAll()">
      </div>

      <div class="f-content">
        <div class="f-flex-ct" style="font-weight: 400;">
          <p>累计收益(元)</p>
          <img class="f-ml-05" style="width:14px;height:14px" src="@/assets/icons/icon_help_white.png" alt=""
            @click="openOverlay(1)">
        </div>
        <p style="font-weight: 500;font-size: 24px;padding: 18px 0 21px 0">
          {{ off.eye? '****': toThousands(formData.incomeTotal) }}</p>
        <p class="f-show-info">
          <span class="f-mr-05">{{off.eye? '隐藏': '展示'}}收益信息</span>
          <van-icon v-show="off.eye" name="closed-eye" size="20" @click="off.eye = false" />
          <van-icon v-show="!off.eye" name="eye-o" size="20" @click="off.eye = true" />
        </p>
        <img class="f-img" src="@/assets/imgs/earnings_leiji_circle.png" alt="">
      </div>

    </header>

    <section class="f-card">
      <div class="g-flex-ct" style="padding:12px">
        <img class="f-mr-10" style="width:16px;height:16px" src="@/assets/icons/earnings_icon_ black.png" alt="">
        <p style="font-weight: 400;font-size: 12px;color: #424242;">已发放佣金</p>
      </div>
      <div class="f-flex-between" style="padding: 4px 18px 14px 35px" @click="pageJump('commission/list',2)">
        <p style="font-weight: 500;font-size: 20px;color: #090D4A;">{{toThousands(formData.incomeUnfreezentotal)}}</p>
        <van-icon name="arrow" />
      </div>
      <div class="f-content">
        <div>
          <p class="f-mb-05" style="font-weight: 300;font-size: 10px;color: #666666;">直接佣金</p>
          <p style="font-weight: 300;font-size: 14px;color: #000000;">{{toThousands(formData.incomeUnfreezenTotalDirect)}}</p>
        </div>
        <div>
          <p class="f-mb-05" style="font-weight: 300;font-size: 10px;color: #666666;">间接佣金</p>
          <p style="font-weight: 300;font-size: 14px;color: #000000;">{{toThousands(formData.incomeUnfreezenTotalIndidect)}}</p>
        </div>
      </div>
    </section>

    <section class="f-card">
      <div class="g-flex-ct" style="padding:12px">
        <img class="f-mr-10" style="width:16px;height:16px" src="@/assets/icons/earnings_icon_ red.png" alt="">
        <p style="font-weight: 400;font-size: 12px;color: #424242;">冻结佣金</p>
      </div>
      <div class="f-flex-between" style="padding: 4px 18px 14px 35px" @click="pageJump('commission/list',1)">
        <p style="font-weight: 500;font-size: 20px;color: #FF6868;">{{toThousands(formData.incomeFreezen)}}</p>
        <van-icon name="arrow" />
      </div>
      <div class="f-content">
        <div @click="openOverlay(2)">
          <p class="f-mb-05 f-flex-ct" style="font-weight: 300;font-size: 10px;color: #666666;">
            <span class="f-mr-05 ">直接佣金</span>
            <img style="width:7px;height:11px" src="@/assets/icons/earnings_icon_ hint_orange.png" alt="">
          </p>
          <p style="font-weight: 300;font-size: 14px;color: #000000;">{{toThousands(formData.incomeFreezenDirect)}}</p>
        </div>
        <div @click="openOverlay(2)">
          <p class="f-mb-05 f-flex-ct" style="font-weight: 300;font-size: 10px;color: #666666;">
            <span class="f-mr-05">间接佣金</span>
            <img style="width:7px;height:11px" src="@/assets/icons/earnings_icon_ hint_orange.png" alt="">
          </p>
          <p style="font-weight: 300;font-size: 14px;color: #000000;">{{toThousands(formData.incomeFreezenIndirect)}}</p>
        </div>
      </div>
    </section>

    <section class="f-card">
      <div class="g-flex-ct" style="padding:12px">
        <img class="f-mr-10" style="width:16px;height:16px" src="@/assets/icons/earnings_icon_ orange.png" alt="">
        <p style="font-weight: 400;font-size: 12px;color: #424242;">可提现余额</p>
      </div>
      <div class="f-flex-between" style="padding: 4px 18px 14px 35px" @click="pageJump('withdraw')">
        <p style="font-weight: 500;font-size: 20px;color: #FFA811;">{{ formData.incomerest }}</p>
        <p>
          <span class="f-mr-05" style="font-weight: 300;font-size: 14px;color: #424242">去提现</span>
          <van-icon name="arrow" />
        </p>
      </div>
    </section>

    <section class="f-card">
      <div class="g-flex-ct" style="padding:12px">
        <img class="f-mr-10" style="width:16px;height:16px" src="@/assets/icons/earnings_icon_ blue.png" alt="">
        <p style="font-weight: 400;font-size: 12px;color: #424242;">已提现金额</p>
      </div>
      <div class="f-flex-between" style="padding: 4px 18px 14px 35px" @click="pageJump('withdraw/list')">
        <p style="font-weight: 500;font-size: 20px;color: #488BFE;">{{ toThousands(formData.incomewithdraw) }}</p>
        <p>
          <span class="f-mr-05" style="font-weight: 300;font-size: 14px;color: #424242">查看记录</span>
          <van-icon name="arrow" />
        </p>
      </div>
    </section>

    <van-overlay :show="off.overlay" @click="off.overlay = false">
      <div class="f-wrapper">
        <template v-if="overlayType == 1">
          <p style="font-weight: 500;font-size: 19px;color: #000000;">提示</p>

          <div style="font-weight: 300;font-size: 14px;color: #424242;margin:26px 0 36px 0;">
            <p>已发放佣金+冻结佣金=累计收益</p>
            <p class="f-mt-05">可提现余额+已提现金额=已发放佣金</p>
          </div>

          <div style="padding:21px 40px 0 40px">
            <van-button round block type="primary" color="#488BFE">确定</van-button>
          </div>
        </template>
        <template v-if="overlayType == 2">
          <p style="font-weight: 500;font-size: 19px;color: #000000;">冻结的直接佣金</p>
          <ul>
            <li>
              <p>次日解冻(元)：</p>
              <p>{{toThousands(unfreezenForm.nd)}}</p>
            </li>
            <li>
              <p>次月解冻(元)：</p>
              <p>{{toThousands(unfreezenForm.nm)}}</p>
            </li>
            <li>
              <p>1~3个月解冻(元)：</p>
              <p>{{toThousands(unfreezenForm.lm)}}</p>
            </li>
            <li>
              <p>3个月以上解冻(元)：</p>
              <p>{{toThousands(unfreezenForm.em)}}</p>
            </li>
          </ul>

          <div style="padding:21px 40px 0 40px">
            <van-button round block type="primary" color="#488BFE">确定</van-button>
          </div>
        </template>
      </div>
    </van-overlay>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import { getDateTime, toThousands } from '@/utils/utils';
import api from './api'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      off: {
        eye: false,
        overlay: false,
      },

      overlayType: "",

      serverTime: '',
      formData: {},
      unfreezenForm: {}
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '我的收益',
        show: true,
        left: false,
        leftType: 'back',
        right: false,
        rightType: 'search',
        bg: '#090D4A'
      });

      getIncomeAll()
    })

    const getIncomeAll = () => {
      api.incomeAll().then(res => {
        state.serverTime = res.serverTime
        res.data.incomerest = Math.floor(res.data.incomerest * 100) / 100
        state.formData = res.data
      })
    }

    const openOverlay = (type) => {
      state.overlayType = type
      if (type == 2) {
        api.incomeUnfreezen().then(res => {
          console.log(res)
          state.unfreezenForm = res.data
        })
      }
      state.off.overlay = true
    }

    const pageJump = (name, incomeState) => {
      router.push({
        path: `/capital/${name}`,
        query: {
          incomeState
        }
      })
    }

    return {
      ...toRefs(state),
      getDateTime,
      getIncomeAll,
      toThousands,
      openOverlay,
      pageJump
    }
  }
}
</script>
<style lang='scss' scoped>
.f-capital {
  .f-header {
    background: #090d4a;
    color: #ffffff;
    font-size: 12px;
    padding: 10px 12px;
    .f-content {
      margin-top: 68px;
      height: 160px;
      text-align: center;
      position: relative;
      z-index: 1;
      .f-show-info {
        margin: 0 100px;
        padding: 8px 0;
        background: #2e3164;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .f-img {
        width: 246px;
        height: 186px;
        position: absolute;
        left: 50%;
        top: -44px;
        transform: translateX(-50%);
        z-index: -1;
      }
    }
  }
  .f-card {
    background: #ffffff;
    margin-bottom: 12px;
    .f-content {
      background: #eff5ff;
      padding-top: 10px;
      padding-bottom: 6px;
      display: flex;
      div {
        width: 50%;
        text-align: center;
      }
      div:first-child {
        border-right: 1px solid #b8cef4;
      }
    }
  }
  .f-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);

    width: 305px;
    background: #ffffff;
    border-radius: 7px;
    text-align: center;
    padding: 20px 0;
    ul {
      margin-top: 20px;
      li {
        display: flex;
        margin: 5px 0;
        font-size: 14px;
        color: #ff6868;
        p:first-child {
          width: 190px;
          text-align: right;
          color: #707070;
        }
      }
    }
  }
}
</style>